<template>
  <div>
    <a-modal :visible="visible" title="新建项目" :bodyStyle="{
      padding: '20px 60px',
    }" width="800px" :footer="null" @cancel="cancelClick" destroyOnClose>
      <a-form>
        <a-form-item v-bind="validateInfos.name" label="项目名称">
          <a-input v-model:value="modelRef.name" placeholder="请输入项目名称" />
        </a-form-item>
        <a-form-item v-bind="validateInfos.logo" label="项目LOGO">
          <a-upload :action="$utils.imgAction" :headers="{ 'org-token': $store.getters.token }"
            v-model:file-list="logoList" @change="handleLogoUpload" :multiple="true" name="image"
            :data="{ dir: 'work_ai' }" accept="image/*" list-type="picture-card">
            <div v-if="!logoList.length">
              <PlusOutlined />
              <div>上传图片</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item v-bind="validateInfos.relation" label="关联抖音门店">
          <a-button>添加PIO</a-button>
        </a-form-item>
        <!-- <a-form-item v-bind="validateInfos.ip_count" label="可邦员工IP数">
            <div class="flex" style="align-items: center;"> 
                <a-radio-group v-model:value="modelRef.ip_count">
                <a-radio :value="1">不限</a-radio>
                <a-radio :value="2">
                    自定义
                    <a-tooltip>
                    <template #title>
                        此项目可绑定的料音账号数量上限，员工IP账号数量会共用可绑定账
                        号的额度，当账号总额度用完时项目将无法再绑定员工IP账号
                    </template>
<question-circle-outlined />
</a-tooltip>
</a-radio>
</a-radio-group>
<a-input-number placeholder="请输入 单位个" v-if="modelRef.ip_count==2" style="width: 200px;">

</a-input-number>
</div>
</a-form-item> -->
        <a-form-item>
          <div>说明：</div>
          <div>1、新建项目时，将自动创建项目的素材目录</div>
          <div>2、添加POI后，可以在视频发布等场景中，快速使用并携带POI信息</div>
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-space :size="20">
          <a-button @click="cancelClick">取消</a-button>
          <a-button type="primary" @click="submitClick">创建</a-button>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { Form, message } from "ant-design-vue";
import {
  QuestionCircleOutlined,
  PlusOutlined
} from "@ant-design/icons-vue";
const useForm = Form.useForm;
export default defineComponent({
  name: "NewClip",
  components: {
    QuestionCircleOutlined,
    PlusOutlined
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imgeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      logoList: [],
      options: [],
      count: 0,
      ratioList: [
        {
          id: '9:16',
          name: '竖版',
        },
        {
          id: '16:9',
          name: '横版',
        },
        {
          id: '1:1',
          name: '方形',
        }
      ],
    });

    const modelRef = reactive({
      name: "",
      logo: "",
      relation: '',
      // 比例
      ratio: '9:16',
      ip_count: 0
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入姓名",
        },

      ],
      logo: [
        {
          required: true,
          message: "请输入姓名",
        },

      ],
      ip_count: [
        {
          required: true,
          message: "请输入姓名",
        },

      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };

    const submitClick = () => {
      validate().then(() => {
        console.log("");
        emit("onSubmit");
        resetFields();
      });
    };
    const ratioChange = (id) => {
      modelRef.ratio = id
    }
    // 上传图片(应用图标)
    const handleLogoUpload = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList.map((file, index) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
            } else {
              message.warning(file.response.msg);
              resFileList.splice(index, 1);
            }
          }
        });
      }
      state.logoList = resFileList;
      if (state.logoList.length) {
        state.detail.app_logo = state.logoList[0].url;
      } else {
        state.detail.app_logo = "";
      }
    };
    return {
      ...toRefs(state),
      cancelClick,
      validateInfos,
      resetFields,
      modelRef,
      submitClick,
      ratioChange,
      handleLogoUpload
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.ratio-list {
  display: flex;

}

.ratio-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 80px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #F0F8FF;
  margin-right: 10px;
  color: #2878FF;
  cursor: pointer;
}

.w9-h16 {
  width: calc(70px / (16/9));
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #fff0e2 0%, #F0F8FF 100%);
  border: 1px solid #2878FF;
}

.w16-h9 {
  width: calc(50px / (9/16));
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #fff0e2 0%, #F0F8FF 100%);
  border: 1px solid #2878FF;
}

.w1-h1 {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #fff0e2 0%, #F0F8FF 100%);
  border: 1px solid #2878FF;
}

.active-ratio {
  background: #fef6f2;
  // color: #fef6f2;
  border: 1px solid #2878FF;
}

input {
  border-radius: 5px;
}

:deep(.ss-select-selector) {
  border-radius: 5px 0 0 5px !important;
}

.select-input :deep(.ss-select-selector) {
  border-radius: 5px !important;
}

button {
  border-radius: 5px;
}
</style>